<template>
  <div>
    <div class="mui-card" v-for="(item,i) in shopcar" :key="item.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- 绑定值 把本地同步到页面    再用@changer与本地存储同步-->
          <mt-switch
            class="sw"
            v-model="$store.getters.getselect[item.id]"
            @change="getswitch(item.id,$store.getters.getselect[item.id])"
          ></mt-switch>
          <div class="shopcar">
            <img class="p1" :src="item.thumb_path" alt>
            <h4>{{item.title}}</h4>
            <span class="span1">￥:{{item.sell_price}}</span>
            <numbox
              class="num"
              :carcountinfo="$store.getters.getshopcarcount[item.id]"
              :shopcarid="item.id"
            ></numbox>
            <!-- {{$store.getters.getshopcarcount[item.id]}}   -->
          </div>
          <div style="clear:both"></div>
          <button class="button1" @click="removes(item.id,i)">删除</button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner jiesuan">
          总计(不含运费)
          <p>选择{{$store.getters.gettotal.zongshu}}件商品共计{{$store.getters.gettotal.zongjia }}元</p>
        </div>
        <button class="button2" @click="jiesuan()">去结算</button>
      </div>
    </div>
    <!-- <p>{{$store.getters.getselect}}</p> -->
  </div>
</template>
<script>
import numbox from "./chajian/shopcar_numbox.vue"; //数字输入框组件
export default {
  data() {
    return {
      shopcar: [] //商品信息
    };
  },
  created() {
    this.getshopcar();
    this.aaa();
  },
  methods: {
    getshopcar() {
      //去store里拿数据
      //循环所有的人  进行字符串拼接
      var idarr = []; //把数据添加到这个数组
      //判断是否存在id  不存在就是商品没被添加 不必请求接口
      this.$store.state.car.forEach(item => {
        idarr.push(item.id); //把每个id存到idarr  在进行接口掉处id相同的数据
      });
      // console.log(idarr.join(","));
      if (idarr.length <= 0) {
        return;
      }
      this.$http
        .get(
          "http://www.liulongbin.top:3005/api/goods/getshopcarlist/" +
            idarr.join(",")
        )
        .then(result => {
          var result = result.body;
          // console.log(result);
          if (result.status == 0) {
            this.shopcar = result.message;
            // console.log(this.shopcar);
          }
        });
    },
    aaa() {
      // console.log(this.$store.getters.getshopcarcount);
      // console.log(this.$store.getters.getselect[87]);
      // console.log(this.$store.getters.gettotal.zongjia);
    },
    //删除商品
    removes(id, i) {
      console.log(id, i);
      this.shopcar.splice(i, 1); //根据索引删除  同时后面代码进行同步
      this.$store.commit("shopcarremove", id); //传递参数id
    },
    //本地存储数据同步
    getswitch(id, value) {
      // console.log(id, value);
      var switchdata = {
        id: id,
        switchs: value
      };
      console.log(switchdata);
      this.$store.commit("getshopcarswitch", switchdata); //传递状态
    },
    // 结算
    jiesuan() {
      alert(
        "需要支付" +
          this.$store.getters.gettotal.zongjia +
          "你买的起吗你看什么看"
      );
    }
  },
  components: {
    numbox
  }
};
</script>
<style scoped>
.sw {
  height: 60px;
  float: left;
}
.shopcar {
  width: 250px;
  height: 100px;
  float: left;
  /* background: red; */
  margin-left: 10px;
}
.shopcar .p1 {
  width: 60px;
  height: 60px;
  background: red;
  float: left;
}
.shopcar h4 {
  padding-left: 10px;
  width: 180px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  font-size: 16px;
}
.shopcar .span1 {
  height: 30px;
  padding-left: 70px;
  font-size: 15px;
  color: red;
}

.shopcar .num {
  float: right;
}
.button1 {
  float: right;
  margin: 5px;
  color: white;
  background: red;
}
.jiesuan {
  /* width: 250px; */
  float: left;
}
.button2 {
  float: right;
  margin: 20px;
  color: white;
  background: orange;
}

.mint-switch-input:checked + .mint-switch-core {
  border-color: red !important;
  background-color: red !important;
}
/* .mint-switch-input:checked + .mint-switch-core {
  background: red; */
/* } */
</style>